<template>
  <a-modal
    :visible="modelValue"
    top="10vh"
    width="60%"
    :align-center="false"
    :ok-loading="loading"
    @open="open"
    @ok="handleSubmit"
    @cancel="handleCancel"
    @before-open="beforeOpen"
  >
    <template #title> 故障品信息 </template>
    <a-form ref="formRef" :model="form" auto-label-width :rules="rules">
      <a-form-item field="situationTracking" label="情况跟踪">
        <a-textarea
          v-model="form.situationTracking"
          placeholder="请输入"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="expectedReturnTime" label="预计返回时间">
        <a-date-picker
          v-model="form.expectedReturnTime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          show-time
          style="width: 100%"
          placeholder="请选择"
        />
      </a-form-item>
      <a-form-item field="vendorEditUserCode" label="供方填报人">
        <searchItemUser
          v-model="form.vendorEditUserCode"
          v-model:name="form.vendorEditUserName"
          :title="'供方填报人'"
        />
      </a-form-item>
      <a-form-item field="vendorEditDate" label="供方填报时间">
        <a-date-picker
          v-model="form.vendorEditDate"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          show-time
          style="width: 100%"
          placeholder="请选择"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, toRefs } from 'vue';
  import dayjs from 'dayjs';
  import searchItemUser from '@/common/components/search-modal/user.vue';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-prop-types
    selectId: {},
    // eslint-disable-next-line vue/require-prop-types
    selectRow: {},
  });
  const emits = defineEmits(['update:modelValue', 'submit']);
  const cancel = () => {
    emits('update:modelValue', false);
  };
  const { selectRow } = toRefs(props);
  // const { cancel } = useModelFun();
  const formRef = ref(null);
  const loading = ref(false);
  let form = reactive({
    vendorEditUserName: null,
    vendorEditUserCode: null,
  });
  const rules = {
    situationTracking: [
      {
        required: true,
        message: '情况跟踪必填',
      },
    ],
  };
  const handleSubmit = () => {
    formRef.value.validate(async (validate) => {
      if (!validate) {
        emits('submit', form);
        form = Object.assign(form, {});
      }
    });
  };
  // const handleOk = () => {
  //   cancel();
  // };
  const handleCancel = () => {
    cancel();
  };
  const beforeOpen = () => {};
  const open = () => {
    init();
  };
  const init = () => {
    form = Object.assign(form, selectRow.value);
    form.vendorEditDate = dayjs().format('YYYY-MM-DD HH:mm:ss').toString();
  };
</script>
